<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>bulma cards</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.8.0/css/bulma.min.css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/cards.css">
		<style>
		body {
		background-color: #ccc;
		}

		*  {
		border: red solid 1px;
		}
		
			.imgcontainer {
		border: 1px solid red;

		position:relative;
	}
	.tag {
		border: 1px solid red;
		position: absolute;
		right: 0px;
		bottom: 0px;
		background-color: red !important;
	}
.author-image{
	
position: absolute;
		right: 0px;
		bottom: 60px;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    border: 3px solid #ccc;
    border-radius: 50%;
}	

.media .u {
    //margin-top: 100px;
	background-color: white;
	}

	
	
		</style>
</head>

<body>

        <!-- START NAV  style="background-color: red;"  -->
            <!-- END NAV -->

    <div class="container">
<!--    <div id="flow">
            <span class="flow-1"></span>
            <span class="flow-2"></span>
            <span class="flow-3"></span>
        </div> -->
        <div class="section">
            <!-- Developers -->
            <div class="row columns">
                <div class="column is-one-third">
				
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image imgcontainer">
                                <img src="https://images.unsplash.com/photo-1475778057357-d35f37fa89dd?dpr=1&auto=compress,format&fit=crop&w=1920&h=&q=80&cs=tinysrgb&crop=" alt="Image">
							</figure>
						<div class="media ">
								<div class="media-center">
									<img src="http://www.radfaces.com/images/avatars/daria-morgendorffer.jpg" class="author-image " alt="Placeholder image">
								</div>
								<div class="media-content has-text-centered">
									<p class="title article-title">Sapien eget mi proin sed 🔱</p>
									<p class="subtitle is-6 article-subtitle">
										<a href="#">@daria</a> on February 17, 2018
									</p>
								</div>
						</div>							
                        </div>

                        <div class="card-content">
<!--                             <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://i.imgsafe.org/a4/a4bb9acc5e.jpeg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">Okinami</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Lead Developer</p>
                                </div>
                            </div> -->
                            <div class="content">
                                The Beast stumbled in the dark for it could no longer see the path. It started to fracture and weaken, trying to reshape itself into the form of metal. Even the witches would no longer lay eyes upon it, for it had become hideous and twisted.
                                <div class="background-icon"><span class="icon-twitter"></span></div>
                            </div>
                        </div>
                    </div>	
                </div>
				
				
				
				
<div class="column is-one-third">
<div class="card">
		<div class="card-image">
			<figure class="image is-5by3">
				<img src="https://images.unsplash.com/photo-1475778057357-d35f37fa89dd?dpr=1&auto=compress,format&fit=crop&w=1920&h=&q=80&cs=tinysrgb&crop=" alt="Image">
			</figure>
		</div>
		<div class="card-content ">
			<div class="media is-overlay">
				<div class="media-left">
					<figure class="image is-96x96">
						<img src="https://i.imgsafe.org/a4/a4bb9acc5e.jpeg" alt="Image">
					</figure>
				</div>
				<div class="media-content">
					<p class="title is-4 no-padding">Okinami</p>
					<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
					<p class="subtitle is-6">Lead Developer</p>
				</div>
			</div>
			<div class="content">
				The Beast stumbled in the dark for it could no longer see the path. The Beast stumbled in the dark for it could no longer see the path.The Beast stumbled in the dark for it could no longer see the path.The Beast stumbled in the dark for it could no longer see the path.The Beast stumbled in the dark for it could no longer see the path. It started to fracture and weaken, trying to reshape itself into the form of metal. Even the witches would no longer lay eyes upon it, for it had become hideous and twisted.
				<div class="background-icon"><span class="icon-twitter"></span></div>
			</div>
		</div>
		<footer class="card-footer">
		<p class="card-footer-item">
		  <span>
			View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
		  </span>
		</p>
		<p class="card-footer-item">
		  <span>
			Share on <a href="#">Facebook</a>
		  </span>
		</p>
		</footer>
</div>
</div>	

				
                <div class="column is-one-third">
                    <div class="card large">
					  <div class="card-image">
						<figure class="image is-4by3">
						  <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
						</figure>
					  </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://i.imgsafe.org/a5/a5e978ce20.jpeg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">The Conceptionist</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Developer</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                                <div class="background-icon"><span class="icon-barcode"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Developers -->

            <!-- Staff -->
            <div class="row columns is-multiline">
                <div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media ">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 4Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
<!--                 <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://source.unsplash.com//Rfflri94rs8" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src='http://www.radfaces.com/images/avatars/richard-wang.jpg' alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">Sphirou Sapphirou</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://source.unsplash.com/b6VzeoRZiS0" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src='http://www.radfaces.com/images/avatars/jeffrey-douglas.jpg' alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">PlayTheFallen</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Sometimes I dip my nose into my cereals. I do it coz it's funny.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://i.imgsafe.org/a4/a4bda71ae4.jpeg" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="http://www.radfaces.com/images/avatars/scrappy-doo.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">FelixCAT</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://source.unsplash.com/ogYIzsNGu3Y" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="http://www.radfaces.com/images/avatars/scrappy-doo.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">ScoobyDOG</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://source.unsplash.com/KgjcndVr7tU" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="http://www.radfaces.com/images/avatars/scrappy-doo.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                        <p class="title is-4 no-padding">Scrappy Doo</p>
                                        <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                        <p class="subtitle is-6">Moderator</p>
                                    </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://i.imgsafe.org/a5/a5e978ce20.jpeg" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="http://www.radfaces.com/images/avatars/alex-mack.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4">Prototyp3</p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Gnxquq4oYQc" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="http://www.radfaces.com/images/avatars/alex-mack.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4 no-padding">Alex Mack</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large">
                        <div class="card-image">
                            <figure class="image">
                                <img src="https://source.unsplash.com/qbtyUQtqJ8k" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="http://www.radfaces.com/images/avatars/alex-mack.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4">Alex Mack</p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
            <!-- End Staff -->
        </div>
    </div>

    <footer class="footer">
            <div class="container">
                <div class="content has-text-centered">
                    <div class="soc">
                        <a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
                        <a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
                        <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
                        <a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
                    </div>
                    <p>
                        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
                        The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
                    </p>
                </div>
            </div>
        </footer>

            <script src="../js/bulma.js"></script>


</body>

</html>
